<template>
  <div class="vacancy-monitor">
    <!-- 水电费记录 -->
    <div class="utility-records">
      <div class="section-title">
        水电费记录
        <el-tooltip
          content="连续多日水电用量相同，可能存在空置情况"
          placement="top"
        >
          <el-icon class="info-icon"><InfoFilled /></el-icon>
        </el-tooltip>
      </div>
      <el-table :data="tableData" v-loading="loading" border stripe>
        <el-table-column prop="data" label="日期" />
        <el-table-column prop="electricity" label="电量 (度)">
          <template #default="{ row }">
            {{ row.electricity ?? 39 }}
          </template>
        </el-table-column>
        <el-table-column prop="water" label="水量 (吨)">
          <template #default="{ row }">
            {{ row.water ?? 53 }}
          </template>
        </el-table-column>
        <el-table-column prop="suspected" label="疑似占用" width="100">
          <template #default="{ row }">
            <span :class="['status', row.suspected ? 'yes' : 'no']">
              {{ row.suspected ? "是" : "否" }}
            </span>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="pageNum"
          v-model:page-size="pageSize"
          :total="total"
          :page-sizes="[5, 10, 20, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from "vue";
import { InfoFilled } from "@element-plus/icons-vue";
import { getVacancyMonitorRecords } from "../services"; // 路径按实际调整

const props = defineProps({
  assetId: {
    type: [String, Number],
    required: true,
  },
});

const tableData = ref([]);
const total = ref(0);
const loading = ref(false);
const pageNum = ref(1);
const pageSize = ref(5);

const fetchData = async () => {
  loading.value = true;
  try {
    const res = await getVacancyMonitorRecords({
      assetId: props.assetId,
      pageNum: pageNum.value,
      pageSize: pageSize.value,
    });
    if (res.code === 200) {
      tableData.value = res.rows;
      total.value = res.total;
    }
  } finally {
    loading.value = false;
  }
};

onMounted(fetchData);
watch([() => props.assetId, pageNum, pageSize], fetchData);

const handleSizeChange = (val) => {
  pageSize.value = val;
  pageNum.value = 1;
};
const handleCurrentChange = (val) => {
  pageNum.value = val;
};
</script>

<style lang="scss" scoped>
.vacancy-monitor {
  padding: 0 20px;

  .asset-info {
    padding: 16px 0;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 24px;

    .info-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;

      &:last-child {
        margin-bottom: 0;
      }

      .name {
        font-size: 16px;
        font-weight: 500;
        color: #111827;
      }

      .number {
        font-size: 14px;
        color: #666;
      }

      .address,
      .area {
        font-size: 14px;

        .label {
          color: #666;
        }

        .value {
          color: #111827;
        }
      }
    }
  }

  .utility-records {
    .section-title {
      font-size: 16px;
      font-weight: 500;
      color: #111827;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 8px;

      .info-icon {
        color: #3b82f6;
        font-size: 16px;
        cursor: help;
      }
    }

    .status {
      &.yes {
        color: #3b82f6;
      }
      &.no {
        color: #666;
      }
    }

    .pagination {
      margin-top: 16px;
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>
